<template>
    <div id="bodys">
        <dv-full-screen-container>
            <div id="temps">
                <dv-charts :option="temp" id="temp"/>
                <p class="ps">{{temp["series"][0]["data"][0].value}}</p>
                <el-button type="success" @click="test">实时追踪</el-button>
            </div>
            <div id="humps">
                <dv-charts :option="hump" id="hump"/>
                <p class="ps">{{hump["series"][0]["data"][0].value}}</p>
                <!-- <el-button type="success" @click="test">实时追踪</el-button> -->
            </div>
            <div v-show="show" id="jingbao">
                <img src="../assets/jinggao.png" alt="温度过高">
            </div>
            <div id="kongzhi"  v-show="true">
                <el-button type="success" @click="shanshuo">闪烁警告</el-button>
                <el-button type="success" @click="stopShanshuo">停止闪烁</el-button>
                <el-button type="success" @click="getOneNet">获取数据</el-button>
                <el-button type="success" @click="stopChick">停止检测</el-button>
                <el-input-number v-model="num" :min="1" :max="100" label="温度值"></el-input-number>
                <el-button type="success" @click="sendData">调整温度</el-button>
                <!-- <el-button type="success" @click="getdata_onenet">单独获取数据</el-button> -->
                <el-button type="success" @click="routeTurn">返回地图导航页面</el-button>
                <br>
                打开风扇<el-switch v-model="fin" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" @change="sendFin(data)"></el-switch>
                {{fin}}

                <p>风扇状态：{{this.finData}}</p>
                <p>MQ数据：{{this.MQData}}</p>
            </div>

        </dv-full-screen-container>
    </div>
</template>
<script>
  export default {
    //name: 'index',
    data () {
      return {
        show:true,
        Tim:null,
        chicks:null,
        HMData:50,
        TMData:50,
        MQData:"",
        finData:"",
        data:"value",
        shandongFlag:1,
        fin:0,
        num:30,
        temp:{
            title: {
            text: '当前温度',
            style: {
            fill: '#ff9',
            fontSize:30,
            }
            },
            series: [
                {
                type: 'gauge',
                data: [ { name: 'wendu', value: 50 } ],
                center: ['50%', '55%'],
                axisLabel: {
                    formatter: '{value}°',
                    style: {
                        fill: '#3ff',
                        fontSize:30
                    }
                },
                axisTick: {
                    style: {
                    stroke: '#f3f'
                    }
                },
                animationCurve: 'easeInOutBack'
                }
            ]
        },
        hump:{
            title: {
            text: '当前湿度',
            style: {
            fill: '#ff9',
            fontSize:30,
            }
            },
            series: [
                {
                type: 'gauge',
                data: [ { name: 'wendu', value: 50 } ],
                center: ['50%', '55%'],
                axisLabel: {
                    formatter: '{value}°',
                    style: {
                        fill: '#3ff',
                        fontSize:30
                    }
                },
                axisTick: {
                    style: {
                    stroke: '#f3f'
                    }
                },
                animationCurve: 'easeInOutBack'
                }
            ]
        }
        
        }
    },
    mounted () {//页面创建完成后立即调用
        // this.test
        // this.chick()
    },
    methods: {//用时才用
        test(){
            console.log(this.temp)
            console.log(this.temp["series"][0]["data"][0].value)
        },
        chick(){
            this.chicks = setInterval(()=>{
                this.getOneNet()
            },1000)
        },
        stopChick(){
            clearInterval(this.chicks);
            this.show=true;
            alert("停止检测")
        },
        shanshuo(){
            this.shandongFlag = 0;
            this.Tim = setInterval(()=>{
                this.show=!this.show
               
            },1000)
        },
        stopShanshuo(){
            this.shandongFlag = 1;   
            clearInterval(this.Tim);
            this.show=true;

            //alert("停止闪烁")

        },
        getOneNet(){
            const that = this
            const {temp} = this
            this.axios({
            method : 'POST',
            url : 'http://192.168.1.7:5001/getOneNet ',
            data :{
                "deviceIds" : "755493629",
                "APIKeys" : "HFUwXTTVeKPk1H3p=qjAUyMvSuM=",
            },
            headers:{
               // 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' ,//以表单格式传输
                'Content-Type': 'application/json' //以json格式传输
            }
            })
            .then((res)=>{
                console.log(res.data);
                that.temp["series"][0]["data"][0].value= res.data[2]["current_value"]//温度
                that.hump["series"][0]["data"][0].value=res.data[1]["current_value"]//湿度
                that.MQData= res.data[3]["current_value"]//MQ
                that.finData= res.data[0]["current_value"]//风扇开关
                //跟新图表信息
                this.temp = {...this.temp}
                this.hump = {...this.hump}
                console.log("闪动="+this.shandongFlag)
                if(res.data[2]["current_value"]>that.num ){
                    if(this.shandongFlag == 1){
                        this.shanshuo();
                    }                  
                }
                else{
                    this.stopShanshuo();
                }
                
            })
            .catch((error)=>{
                console.log(error);
            })
        },
        sendData(){
            this.axios({
                url:'/onenet/cmds?device_id=755493629&qos=1&timeout=30',//http://api.heclouds.com/cmds?device_id=755493629&qos=1&timeout=30
                method:'POST',
                headers:{
					//'Content-Type':"text/plain",
                    'Content-Type': 'application/x-www-form-urlencoded',
					'api-key':'HFUwXTTVeKPk1H3p=qjAUyMvSuM=',
				},
                data:{
                    'value':this.num
                },
                transformRequest: [function (data) {
                // Do whatever you want to transform the data
                let ret = ''
                for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) 
                }
                return ret
            }],
            })
            .then((res)=>{
                console.log(res.data)
            })
            .catch((error)=>{
                console.log(error)
            })
        },
        sendFin(res){
            console.log(res);
            this.axios({
                url:'/onenet/cmds?device_id=755493629&qos=1&timeout=30',//http://api.heclouds.com/cmds?device_id=755493629&qos=1&timeout=30
                method:'POST',
                headers:{
					//'Content-Type':"text/plain",
                    'Content-Type': 'application/x-www-form-urlencoded',
					'api-key':'HFUwXTTVeKPk1H3p=qjAUyMvSuM=',
				},
                data:{
                    'fin':this.fin
                },
                transformRequest: [function (data) {
                // Do whatever you want to transform the data
                let ret = ''
                for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) 
                }
                return ret
            }],
            })
            .then((res)=>{
                console.log(res.data)
            })
            .catch((error)=>{
                console.log(error)
            })
        },
        routeTurn(){
           // this.$router.push({ name:'Index', query:{ name:'word', age:'11' } })
           this.$router.push({ name:'MapContainer'})
        },
        // getdata_onenet(){
        //     this.axios({
        //         url:'onenet/devices/755493629/datastreams',
        //         method:'GET',
        //         headers:{
        //             'api-key':"HFUwXTTVeKPk1H3p=qjAUyMvSuM="
        //         }
        //     })
        //     .then((res)=>{
        //         console.log(res.data.data)
        //     })
        //     .catch((error)=>{
        //         console.log(error)
        //     })
        // }

    }
  }
  </script>
  <style scoped>
    #bodys{
        position: relative;
        height: 100%;
        width: 100%;
        background-color: rgb(218, 145, 50);
    }
    #temp{
        width: 300px;
        height: 300px;
        border: 1px red solid;
        background-color: rgb(73, 153, 153);
        position:relative;
        top:10px;
        left:30px;
        margin: 150 auto;
    }
    #temps{
        width: 350px;
        height: 350px;
        border: 1px red solid;
        background-color: rgb(73, 153, 153);
        position: absolute;
        top:30px;
        left:30px;
        /* border-radius:30px; */
    }
    .ps{
        text-align: center;
        font-size: 20px;
    }
    #hump{
        width: 300px;
        height: 300px;
        border: 1px red solid;
        background-color: rgb(73, 153, 153);
        position:relative;
        top:10px;
        right:-30px;
        margin: 150 auto;
    }
    #humps{
        width: 350px;
        height: 350px;
        border: 1px red solid;
        background-color: rgb(73, 153, 153);
        position: absolute;
        top:30px;
        right:30px;
        /* border-radius:30px; */
    }
    #jingbao{
        width: 100px;
        height: 100px;
        margin: 400px auto;
        /* background-color: blue; */
    }
    #kongzhi{
        position: fixed;
        width: 100%;
        height: 300px;
        top: 600px;
        left: 13px;
        background-color: rgb(206, 184, 20);
    }
  </style>
  